<template>
    <div>
        <div class="title">疫情期间出行防疫政策</div>
        <van-field
                v-model="goCity"
                is-link
                readonly
                label="出发城市"
                placeholder="请选择所在地区"
                @click="show = true"
        />
        <van-popup v-model="show" round position="bottom">
            <van-cascader
                    v-model="cascaderValue"
                    title="请选择出发城市"
                    :options="options"
                    @close="show = false"
                    @finish="onFinish"
            />
        </van-popup>

        <van-field
                v-model="toCity"
                is-link
                readonly
                label="到达城市"
                placeholder="请选择所在地区"
                @click="show2 = true"
        />
        <van-popup v-model="show2" round position="bottom">
            <van-cascader
                    v-model="cascaderValue2"
                    title="请选择出发城市"
                    :options="options"
                    @close="show2 = false"
                    @finish="onFinish2"
            />
        </van-popup>

        <!-- 查询 -->
        <div class="search">
            <van-button type="primary" size="large" @click="search">查询疫情的防疫</van-button>
        </div>

        <!-- 政策查询结果 -->
        <div class="content">
            <div class="from">出发城市:</div>

            <div class="to">到达城市:</div>
        </div>
    </div>
</template>

<script>
    import api from '../../api/index'

    export default {
        name: 'Travel',
        data() {
            return {
                show: false,
                show2: false,
                goCity: '',
                from: '',       // 出发的id
                to: '',         // 到达的id
                toCity: '',
                cascaderValue: '',
                cascaderValue2: '',
                // 选项列表，children 代表子选项，支持多级嵌套
                options: [],

                from_info: {},      //出发城市的信息
                to_info: {},
            };
        },
        methods: {
            // 全部选项选择完毕后，会触发 finish 事件
            onFinish({ value,selectedOptions,tabIndex }) {
                this.from = value
                this.show = false;
                this.goCity = selectedOptions.map((option) => option.text).join('/');
            },

            onFinish2({ value,selectedOptions,tabIndex }) {
                this.to = value;
                this.show2 = false;
                this.toCity = selectedOptions.map((option) => option.text).join('/');
            },

            async search() {
                const res = await api.getTravelQuery({from:this.from,to:this.to});
                console.log(res);

                if(res.status === 200) {
                    console.log(res.data.result.from_info);
                    this.from_info = res.data.result.from_info;
                    this.to_info = res.data.result.to_info;
                }else {
                    console.log('疫情期间出行防疫政策接口有问题');
                }
            }
        },

        async created() {
            const res = await api.getTravel();

            if(res.status === 200) {
                this.options = res.data.result.map(item => {
                    let children = item.citys.map(itemCity => {
                        return {
                            text: itemCity.city,
                            value: itemCity.city_id,
                        }
                    })

                    return {
                        text: item.province,
                        value: item.province_id,
                        children : children,
                    }
                });
            }
        }
    };
</script>

<style scoped lang="less">
    .title {
        padding: 0.2rem;
    }
    .search {
        margin: 0.2rem;
    }
</style>
